<template>
	<page-meta :page-style="'overflow:'+(show?'hidden':'visible')"></page-meta>
	<view class="param-contents">
		<h5 class="param-title">{{paramTitle}}</h5>
		<!-- 主控 -->
		<view v-if="type==0">

		</view>
		<!-- 仓控 -->
		<view v-else-if="type==1">
			<view class="cards flexLayout bin-content" v-for="(item,index) in Number(binNum)" :key="index">
				<view class="tag-text">
					{{index+1}}
				</view>
				<u-button type="success" size="mini" class="bin-btn">开仓</u-button>
				<u-button type="warning" size="mini" class="bin-btn">开启加热</u-button>
				<u-button type="primary" size="mini" class="bin-btn">启用</u-button>
				<u-button type="error" size="mini" class="bin-btn">禁用</u-button>
			</view>
		</view>
		<!-- 检测单元 -->
		<view v-else-if="type==2">
			<h5 class="param-title detail-name">直流风扇和电子锁控制</h5>
			<view class="param-one">
				<checkbox-group @change="checkboxChange($event,'check1')">
					<checkbox :checked="checkList.check1" color="#51b7b9" style="transform:scale(0.7)" />
				</checkbox-group>
				<text>直流风扇1控制位</text>
				<uni-data-select class="sliders" placeholder="直流风扇1控制位" v-model="boxForm['06010011']"
					:key="boxForm['06010011']" :localdata="LOCK_CONTROL"></uni-data-select>
			</view>
			<view class="param-one">
				<checkbox-group @change="checkboxChange($event,'check1')">
					<checkbox :checked="checkList.check1" color="#51b7b9" style="transform:scale(0.7)" />
				</checkbox-group>
				<text>直流风扇2控制位</text>
				<uni-data-select class="sliders" placeholder="直流风扇2控制位" v-model="boxForm['06010011']"
					:key="boxForm['06010011']" :localdata="LOCK_CONTROL"></uni-data-select>
			</view>
			<view class="param-one">
				<checkbox-group @change="checkboxChange($event,'check1')">
					<checkbox :checked="checkList.check1" color="#51b7b9" style="transform:scale(0.7)" />
				</checkbox-group>
				<text>直流风扇3控制位</text>
				<uni-data-select class="sliders" placeholder="直流风扇3控制位" v-model="boxForm['06010011']"
					:key="boxForm['06010011']" :localdata="LOCK_CONTROL"></uni-data-select>
			</view>
			<view class="param-one">
				<checkbox-group @change="checkboxChange($event,'check1')">
					<checkbox :checked="checkList.check1" color="#51b7b9" style="transform:scale(0.7)" />
				</checkbox-group>
				<text>直流风扇4控制位(备电用风扇1)</text>
				<uni-data-select class="sliders" placeholder="直流风扇4控制位(备电用风扇1)" v-model="boxForm['06010011']"
					:key="boxForm['06010011']" :localdata="LOCK_CONTROL"></uni-data-select>
			</view>
			<view class="param-one">
				<checkbox-group @change="checkboxChange($event,'check1')">
					<checkbox :checked="checkList.check1" color="#51b7b9" style="transform:scale(0.7)" />
				</checkbox-group>
				<text>直流风扇5控制位(备电用风扇2)</text>
				<uni-data-select class="sliders" placeholder="直流风扇5控制位(备电用风扇2)" v-model="boxForm['06010011']"
					:key="boxForm['06010011']" :localdata="LOCK_CONTROL"></uni-data-select>
			</view>

			<h5 class="param-title detail-name">交流风扇控制</h5>
			<view class="param-one">
				<checkbox-group @change="checkboxChange($event,'check1')">
					<checkbox :checked="checkList.check1" color="#51b7b9" style="transform:scale(0.7)" />
				</checkbox-group>
				<text>交流风扇1控制位(交流散热风扇1)</text>
				<uni-data-select class="sliders" placeholder="交流风扇1控制位(交流散热风扇1)" v-model="boxForm['06010011']"
					:key="boxForm['06010011']" :localdata="LOCK_CONTROL"></uni-data-select>
			</view>
			<view class="param-one">
				<checkbox-group @change="checkboxChange($event,'check1')">
					<checkbox :checked="checkList.check1" color="#51b7b9" style="transform:scale(0.7)" />
				</checkbox-group>
				<text>交流风扇2控制位(交流散热风扇2)</text>
				<uni-data-select class="sliders" placeholder="交流风扇2控制位(交流散热风扇2)" v-model="boxForm['06010011']"
					:key="boxForm['06010011']" :localdata="LOCK_CONTROL"></uni-data-select>
			</view>
			<view class="param-one">
				<checkbox-group @change="checkboxChange($event,'check1')">
					<checkbox :checked="checkList.check1" color="#51b7b9" style="transform:scale(0.7)" />
				</checkbox-group>
				<text>交流风扇3控制位(交流散热风扇2)</text>
				<uni-data-select class="sliders" placeholder="交流风扇3控制位(交流散热风扇2)" v-model="boxForm['06010011']"
					:key="boxForm['06010011']" :localdata="LOCK_CONTROL"></uni-data-select>
			</view>
			<view class="param-one">
				<checkbox-group @change="checkboxChange($event,'check1')">
					<checkbox :checked="checkList.check1" color="#51b7b9" style="transform:scale(0.7)" />
				</checkbox-group>
				<text>直流加热风扇1控制位</text>
				<uni-data-select class="sliders" placeholder="直流加热风扇1控制位" v-model="boxForm['06010011']"
					:key="boxForm['06010011']" :localdata="LOCK_CONTROL"></uni-data-select>
			</view>
			<view class="param-one">
				<checkbox-group @change="checkboxChange($event,'check1')">
					<checkbox :checked="checkList.check1" color="#51b7b9" style="transform:scale(0.7)" />
				</checkbox-group>
				<text>直流加热风扇2控制位</text>
				<uni-data-select class="sliders" placeholder="直流加热风扇2控制位" v-model="boxForm['06010011']"
					:key="boxForm['06010011']" :localdata="LOCK_CONTROL"></uni-data-select>
			</view>
			<view class="param-one">
				<checkbox-group @change="checkboxChange($event,'check1')">
					<checkbox :checked="checkList.check1" color="#51b7b9" style="transform:scale(0.7)" />
				</checkbox-group>
				<text>直流加热风扇3控制位</text>
				<uni-data-select class="sliders" placeholder="直流加热风扇3控制位" v-model="boxForm['06010011']"
					:key="boxForm['06010011']" :localdata="LOCK_CONTROL"></uni-data-select>
			</view>

			<view class="param-one">
				<checkbox-group @change="checkboxChange($event,'check1')">
					<checkbox :checked="checkList.check1" color="#51b7b9" style="transform:scale(0.7)" />
				</checkbox-group>
				<text>电控锁控制</text>
				<uni-data-select class="sliders" placeholder="电控锁控制" v-model="boxForm['06010011']"
					:key="boxForm['06010011']" :localdata="ELETRIC_LOCK_CONTROL"></uni-data-select>
			</view>

			<h5 class="param-title detail-name">加热控制</h5>
			<view class="param-one">
				<checkbox-group @change="checkboxChange($event,'check1')">
					<checkbox :checked="checkList.check1" color="#51b7b9" style="transform:scale(0.7)" />
				</checkbox-group>
				<text>加热器1控制位</text>
				<uni-data-select class="sliders" placeholder="加热器1控制位" v-model="boxForm['06010011']"
					:key="boxForm['06010011']" :localdata="LOCK_CONTROL"></uni-data-select>
			</view>
			<view class="param-one">
				<checkbox-group @change="checkboxChange($event,'check1')">
					<checkbox :checked="checkList.check1" color="#51b7b9" style="transform:scale(0.7)" />
				</checkbox-group>
				<text>加热器2控制位</text>
				<uni-data-select class="sliders" placeholder="加热器2控制位" v-model="boxForm['06010011']"
					:key="boxForm['06010011']" :localdata="LOCK_CONTROL"></uni-data-select>
			</view>
			<view class="param-one">
				<checkbox-group @change="checkboxChange($event,'check1')">
					<checkbox :checked="checkList.check1" color="#51b7b9" style="transform:scale(0.7)" />
				</checkbox-group>
				<text>加热器3控制位</text>
				<uni-data-select class="sliders" placeholder="加热器3控制位" v-model="boxForm['06010011']"
					:key="boxForm['06010011']" :localdata="LOCK_CONTROL"></uni-data-select>
			</view>
		</view>

		<!-- 整流电源 -->
		<view v-else-if="type==3">

		</view>

		<!-- 充电电源 -->
		<view v-else-if="type==4">
			<view class="param-one">
				<checkbox-group @change="checkboxChange($event,'check1')">
					<checkbox :checked="checkList.check1" color="#51b7b9" style="transform:scale(0.7)" />
				</checkbox-group>
				<text>运行模式</text>
				<uni-data-select class="sliders" placeholder="运行模式" v-model="boxForm['06010011']"
					:key="boxForm['06010011']" :localdata="RUN_MODE"></uni-data-select>
			</view>
			<view class="param-one">
				<checkbox-group @change="checkboxChange($event,'check1')">
					<checkbox :checked="checkList.check1" color="#51b7b9" style="transform:scale(0.7)" />
				</checkbox-group>
				<text>备电模式</text>
				<uni-data-select class="sliders" placeholder="备电模式" v-model="boxForm['06010011']"
					:key="boxForm['06010011']" :localdata="ELECTRIC_MODE"></uni-data-select>
			</view>
			<view class="param-one">
				<checkbox-group @change="checkboxChange($event,'check1')">
					<checkbox :checked="checkList.check1" color="#51b7b9" style="transform:scale(0.7)" />
				</checkbox-group>
				<text>充电电压</text>
				<input v-model="operateForm.port" class="uni-input inputs" type="digit" placeholder="充电电压"
					style="width: 35%;" />
				<u-checkbox v-model="check1" name="noset">不设置</u-checkbox>
				</u-checkbox-group>
			</view>
			<view class="param-one">
				<checkbox-group @change="checkboxChange($event,'check1')">
					<checkbox :checked="checkList.check1" color="#51b7b9" style="transform:scale(0.7)" />
				</checkbox-group>
				<text>充电电流</text>
				<input v-model="operateForm.port" class="uni-input inputs" type="digit" placeholder="充电电流"
					style="width: 35%;" />
				<u-checkbox v-model="check1" name="noset">不设置</u-checkbox>
				</u-checkbox-group>
			</view>
			<view class="param-one">
				<checkbox-group @change="checkboxChange($event,'check1')">
					<checkbox :checked="checkList.check1" color="#51b7b9" style="transform:scale(0.7)" />
				</checkbox-group>
				<text>电池类型</text>
				<uni-data-select class="sliders" placeholder="电池类型" v-model="boxForm['06010011']"
					:key="boxForm['06010011']" :localdata="BATTERY_TYPE"></uni-data-select>
			</view>
		</view>

		<!-- 操作按钮 -->
		<view class="operate_btns" v-if="type!=1">
			<u-button type="success" size="medium" @click="isSetting">设置</u-button>
		</view>
	</view>
</template>

<script>
	import {
		LOCK_CONTROL,
		ELETRIC_LOCK_CONTROL,
		RUN_MODE,
		ELECTRIC_MODE,
		BATTERY_TYPE,
	} from "@/common/config.js";
	export default {
		data() {
			return {
				type: 0, //参数类型
				paramTitle: "", //参数模块名称

				LOCK_CONTROL: LOCK_CONTROL,
				ELETRIC_LOCK_CONTROL: ELETRIC_LOCK_CONTROL,
				RUN_MODE: RUN_MODE,
				ELECTRIC_MODE: ELECTRIC_MODE,
				BATTERY_TYPE: BATTERY_TYPE,

				binNum: 0, //仓个数
				currentIndex: null, //当前仓号
				show: false,
			}
		},
		onLoad(e) {
			this.type = e.type;
			this.binNum = e.binNum;
			switch (this.type) {
				case "0":
					this.paramTitle = "主控";
					break;
				case "1":
					this.paramTitle = "仓控";
					break;
				case "2":
					this.paramTitle = "检测单元";
					break;
				case "3":
					this.paramTitle = "整流电源";
					break;
				case "4":
					this.paramTitle = "充电电源";
					break;
			}
		},
		methods: {
			checkboxChange(e, key) {
				let value = e.detail.value;
				let check = value.length > 0 ? true : false;
				this.$set(this.checkList, key, check);
			},
			switchChange(e, key) {
				let value = e.detail.value;
				this.boxForm[key] = value;
			},
			onKeyInput(e, key) {
				let value = e.target.value.replace(/\D/g, '');
				this.boxForm[key] = value;
			},

			isSetting() {

			},
			change(e) {
				this.show = e.show
			},
		},
	}
</script>
<style>
	page {
		background-color: #EFF0F1 !important;
	}
</style>
<style lang="scss" scoped>
	@import "@/static/css/common.scss";
	@import "index.scss";

	.param-contents {
		padding: 20rpx;
		background: #ffffff;

		.param-one {
			@include flexLayout(center, flex-start);
			border-bottom: 2rpx solid #E5E5E5;
			font-size: 28rpx;
			color: #333333;
			padding: 10rpx 0;

			text {
				width: 220rpx;
				text-align: right;
				margin-right: 20rpx;
			}

			.labels {
				width: 130rpx;
			}

			.update-labels {
				width: 180rpx;
			}

			.inputs {
				width: calc(100% - 130rpx);
			}

			.address {
				line-height: 52rpx;
				width: calc(100% - 130rpx);
			}

			.update-inputs {
				width: calc(100% - 180rpx);
				text-align: left;
			}

			.mails {
				width: 180rpx;
			}

			.sliders {
				width: calc(100% - 250rpx);
			}

			.help_icon {
				margin-top: 12rpx;
			}

			.textarea-sn {
				width: 55%;
				max-height: 80rpx;
				border-width: 2rpx 20rpx;
				border-style: solid;
				border-color: #F7F7F7;
				line-height: 40rpx;
				font-size: 26rpx;
				padding: 20rpx 0;
			}
		}

		.versions {
			min-height: 200rpx;
			border: 2rpx solid #efefef;
			padding: 20rpx;
		}

		.log_tips {
			color: red;
			font-size: 32rpx;
			margin: 30rpx 0 20rpx;
		}

		.operate_btns {
			text-align: center;
			margin: 60rpx 0;

			.set_btn {
				margin-left: 40rpx;
			}

			.update_btn {
				margin-left: 60%;
			}
		}

		.update_btns {
			text-align: right;
		}

		.param-title {
			border-left: 8rpx solid #0081ff;
			padding-left: 12rpx;
			border-radius: 8rpx;
			color: #0081ff;
			font-size: 36rpx;
			font-weight: bold;
			margin: 20rpx 0;
		}

		.detail-name {
			font-size: 30rpx;
			margin-left: 10rpx;
		}

		.cards {
			width: 100%;
			margin: 30rpx 0;
		}

		.bin-content {
			justify-content: space-around;

			::v-deep .u-size-mini {
				height: 62rpx;
				line-height: 62rpx;
			}
		}
	}
</style>